<template>
    <div class="filter-box">
        <div class="filter-top">
            <div class="tip">筛选</div>
            <div style="display: flex;">
                <div class="btn-1 btnPointer" @click="onReset">重置</div>
                <div class="btn btnPointer" @click="onConfirm">确定</div>
            </div>
        </div>
        <div class="select-box">
            <!-- :style="{ color: getColor('year') }" -->
            <div class="select1 base-select" @click="yearShow = true">
                <!-- :class="[form.year ? 'closeIcon' : 'downIcon' ]" -->
                <div class="label" :style="{ color: getColor('workYear') }">
                    {{ form.workYear ? form.workYear.toString() : '年份' }}
                </div>
                <img :src="downArraw" alt="">
                <!-- <img :src="form.year ? close : downArraw" :class="[form.year ? 'closeIcon' : 'downIcon']" alt=""
                    @click.stop="resetForm('year')"> -->
            </div>
            <div class="select1 base-select" @click="ywShow = true">
                <div class="label" :style="{ color: getColor('businessType') }">
                    {{ form.businessType ? form.businessType : '业务类别' }}
                </div>
                <img src="@/assets/images/downArraw.png" alt="">
            </div>
            <!-- <input type="text" class="select2 base-select" placeholder="责任单位"> -->
            <div class="select2 base-select" @click="zrShow = true">
                <div class="label" :style="{ color: getColor('businessUnit') }">
                    {{ form.businessUnit ? form.businessUnit : '责任单位' }}
                </div>
                <img src="@/assets/images/downArraw.png" alt="">
            </div>
            <div class="select1 base-select" @click="ldShow = true">
                <div class="label" :style="{ color: getColor('workLeader') }">
                    {{ form.workLeader ? form.workLeader : '分管领导' }}
                </div> <img src="@/assets/images/downArraw.png" alt="">
            </div>
            <div class="select1 base-select" @click="jhShow = true">
                <div class="label" :style="{ color: getColor('workStatus') }">
                    {{ form.workStatus ? form.workStatus : '计划状态' }}
                </div>
                <img src="@/assets/images/downArraw.png" alt="">
            </div>
            <div class="select2 base-select" @click="rwShow = true">
                <div class="label" :style="{ color: getColor('workCategory') }">
                    {{ form.workCategory ? form.workCategory : '任务类别' }}
                </div>
                <img src="@/assets/images/downArraw.png" alt="">
            </div>
        </div>
    </div>
    <!-- 业务类型 -->
    <!-- <van-popup teleport="body" v-model:show="ywShow" position="bottom">
        <van-picker :columns="ywColumns" @confirm="onYw" ref="ywRef" @cancel="ywShow = false">
            <template #toolbar>
                <div class="toolbar">
                    <div class="left">
                        <div class="cancel" @click="ywShow = false">取消</div>
                        <div class="reset" @click="resetForm('ywType')">重置</div>
                    </div>
                    <div class="title">123</div>
                    <div class="confirm" @click="onYw">
                        确定
                    </div>
                </div>
            </template>
</van-picker>
</van-popup> -->
    <van-popup teleport="body" v-model:show="ywShow" position="bottom">
        <van-picker title="请选择业务类型" :columns="ywColumns" @confirm="onYw" ref="ywRef" @cancel="ywShow = false" />
    </van-popup>
    <van-popup teleport="body" v-model:show="zrShow" position="bottom">
        <van-picker title="请选择责任单位" :columns="zrColumns" @confirm="onZr" ref="zrRef" @cancel="zrShow = false" />
    </van-popup>
    <van-popup teleport="body" v-model:show="ldShow" position="bottom">
        <van-picker title="请选择分管领导" :columns="ldColumns" @confirm="onLd" ref="ldRef" @cancel="ldShow = false" />
    </van-popup>
    <van-popup teleport="body" v-model:show="jhShow" position="bottom">
        <van-picker title="请选择计划状态" :columns="jhColumns" @confirm="onJh" ref="jhRef" @cancel="jhShow = false" />
    </van-popup>
    <van-popup teleport="body" v-model:show="rwShow" position="bottom">
        <van-picker title="请选择任务类别" :columns="rwColumns" @confirm="onRw" ref="rwRef" @cancel="rwShow = false" />
    </van-popup>
    <van-popup teleport="body" v-model:show="yearShow" position="bottom">
        <van-picker title="请选择年份" :columns="yearColumns" @confirm="onYear" ref="yearRef" @cancel="yearShow = false" />
    </van-popup>
</template>

<script setup>
import downArraw from "@/assets/images/downArraw.png"
import { useDict } from "@/stores/dictStore"
const dictStore = useDict()

const emit = defineEmits(['sendForm'])
const onConfirm = () => {
    emit('sendForm', form)
}
function onReset() {
    Object.keys(form).forEach(key => {
        if(key == 'workYear') {
            return
        }
        form[key] = ""
    })
    emit('sendForm', form)
}

const getColor = (key) => {
    if (form[key]) {
        return 'rgba(51, 51, 51, 1)'
    } else {
        return 'rgba(128, 128, 128, 1)'
    }
}
const form = reactive({
    workYear: "2025",
    workLeader: "",
    businessType: "",
    workStatus: "",
    businessUnit: "",
    workNote: ""
})
const resetForm = (key) => {
    form[key] = ""
    // ywShow.value = false
}
//年
const yearShow = ref(false)
const yearColumns = ref([])
const yearRef = ref(null)
function onYear() {
    const { value } = yearRef.value.getSelectedOptions()[0]
    form.workYear = value
    yearShow.value = false
}
function createYearColumn() {
    const currentYear = new Date().getFullYear(); // 获取当前年份
    for (let i = -2; i <= 0; i++) {
        const year = currentYear + i; // 计算当前年及之前两年
        yearColumns.value.push({ text: year.toString(), value: year.toString() });
    }
    // yearColumns.value.unshift({ text: '全部', value: "" })
}

//业务类别
const ywShow = ref(false)
const ywColumns = [
    // {
    //     text: '全部',
    //     value: ''
    // },
    {
        text: '绿化',
        value: '绿化'
    },
    {
        text: '林业',
        value: '林业'
    },
    {
        text: '环卫',
        value: '环卫'
    },
    {
        text: '市容景观',
        value: '市容景观'
    },
    {
        text: '监督',
        value: '监督'
    },
    {
        text: '行政审批',
        value: '行政审批'
    },
    {
        text: '规划',
        value: '规划'
    },
    {
        text: '绿化规划',
        value: '绿化规划'
    },
    {
        text: '计财',
        value: '计财'
    },
    {
        text: '中央环保督察通报问题整改',
        value: '中央环保督察通报问题整改'
    },
    {
        text: '其它',
        value: '其它'
    }
]
const ywRef = ref(null)
const onYw = () => {
    const { value } = ywRef.value.getSelectedOptions()[0]
    form.businessType = value
    ywShow.value = false
}
// 责任单位
const zrShow = ref(false)
const zrColumns = ref([
    // {
    //     text: '全部',
    //     value: ''
    // }
])
dictStore.orgList.forEach(item => {
    zrColumns.value.push({
        text: item.newName,
        value: item.code
    })
})
const zrRef = ref(null)
const onZr = () => {
    const { value } = zrRef.value.getSelectedOptions()[0]
    form.businessUnit = value
    zrShow.value = false
}
//分管领导
const ldShow = ref(false)
const ldColumns = ref([
    // {
    //     text: '全部',
    //     value: ''
    // }
])
dictStore.userLdList.forEach((item) => {
    ldColumns.value.push({
        text: item.userName,
        value: item.userName
    })
})

const ldRef = ref(null)
const onLd = () => {
    const { value } = ldRef.value.getSelectedOptions()[0]
    form.workLeader = value
    ldShow.value = false
}

//计划进度
const jhShow = ref(false)
const jhColumns = [
    // {
    //     text: '全部',
    //     value: ''
    // },
    {
        text: '正常',
        value: '正常'
    },
    {
        text: '滞后',
        value: '滞后'
    },
    {
        text: '停滞',
        value: '停滞'
    },
    {
        text: '完成',
        value: '完成'
    }

]
const jhRef = ref(null)
const onJh = () => {
    const { value } = jhRef.value.getSelectedOptions()[0]
    form.workStatus = value
    jhShow.value = false
}
//任务类别
const rwShow = ref(false)
const rwColumns = [
    // {
    //     text: '全部',
    //     value: ''
    // },
    {
        text: '区委、区政府重点工作',
        value: '区委、区政府重点工作'
    },
    {
        text: '区委、区政府主要领导明确任务',
        value: '区委、区政府主要领导明确任务'
    },
    {
        text: '市局年度工作',
        value: '市局年度工作'
    },
    {
        text: '其它任务',
        value: '其它任务'
    }
]

const rwRef = ref(null)
const onRw = () => {
    const { value } = rwRef.value.getSelectedOptions()[0]
    form.workCategory = value
    rwShow.value = false
}

onMounted(() => {
    createYearColumn()
})



</script>
<style>
.el-select__selected-item {
    top: 0;
    line-height: 30px;
}

.el-select__suffix>.el-icon {
    font-size: 22px;
}
</style>
<style lang="scss" scoped>
.filter-box {
    padding: 14px 26px 30px 26px;
    box-sizing: border-box;
    // height: 296px;
    opacity: 1;
    border-radius: 30px 30px 0px 0px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 8px 10px 4px rgba(218, 231, 245, 0.5);

    .filter-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tip {
            font-size: 28px;
            color: rgba(51, 51, 51, 1);
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 106px;
            height: 60px;
            font-size: 26px;
            color: rgba(255, 255, 255, 1);
            border-radius: 50px;
            background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%), linear-gradient(90deg, rgba(47, 135, 229, 1) 0%, rgba(97, 184, 246, 1) 100%);
        }

        .btn-1 {
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 106px;
            height: 60px;
            font-size: 26px;
            color: rgb(166, 166, 166);
            background: rgb(255, 255, 255);
            border-radius: 50px;
            border: 1px solid rgb(221, 221, 221);
        }

    }
}

.base-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    width: auto;
    margin-top: 10px;

    img {
        height: 6px;
        width: 12px;
    }

    .label {
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 隐藏溢出的内容 */
        text-overflow: ellipsis;
        /* 使用省略号表示溢出的内容 */
    }


}

.closeIcon {
    height: 20px !important;
    width: 20px !important;
}

.downIcon {
    height: 6px;
    width: 12px;
}

.select1 {
    font-size: 28px;
    width: 190px;
    height: 76px;
    border-radius: 20px;
    background: rgba(248, 248, 250, 1);
    border: none;
    box-shadow: none;
}

.select2 {
    font-size: 28px;
    width: 270px;
    height: 76px;
    border-radius: 20px;
    background: rgba(248, 248, 250, 1);
    border: none;
    box-shadow: none;
}

// .select1 {
//     flex: 1;
// }
// .select2 {
//     flex: 1.2;
// }

::v-deep(.select1 .el-select__wrapper) {
    font-size: 28px;
    min-width: 190px;
    height: 76px;
    border-radius: 20px;
    background: rgba(248, 248, 250, 1);
    border: none;
    box-shadow: none;
}

::v-deep(.select2 .el-select__wrapper) {
    font-size: 28px;
    min-width: 270px;
    height: 76px;
    border-radius: 20px;
    background: rgba(248, 248, 250, 1);
    border: none;
    box-shadow: none;
}

// ::v-deep(.el-select__wrapper >.el-select__placeholder) {
//     top: 0;
//     color: red;
// }
.select-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

::v-depp(.el-select__suffix > .el-icon) {
    font-size: 20px;
}

.customClass {
    .el-select-dropdown__item {
        font-size: 28px;
        height: 56px;
        line-height: 56px;
    }

}

.toolbar {
    width: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30px;

    .left {
        display: flex;

        .reset {
            margin-left: 10px;
        }
    }
}
</style>